<template>
  <div>
    <a-form
      :form="form"
      @submit="onSubmit"
      :style="{ marginBottom: '20px' }"
      id="update-form"
    >
      <div class="header">
        <h3>一、基本信息</h3>
        <div class="operate">
          <transition name="slide-fade">
            <a-button @click="reset" type="primary" v-show="visible"
              >还原默认</a-button
            >
          </transition>
          <a-button @click="showPwd" type="primary">重置密码</a-button>
          <a-button @click="onSubmit" type="primary" v-if="visible"
            >保存修改</a-button
          >
          <a-button @click="updateForm" type="primary" v-if="!visible"
            >修改</a-button
          >
        </div>
      </div>
      <a-row :gutter="10" class="form-main-content">
        <a-col :key="1" :span="8" class="form-item">
          <a-form-item label="账号">
            <span>{{ detail.username }}</span>
          </a-form-item>
        </a-col>
        <a-col :key="2" :span="8" class="form-item">
          <a-form-item label="账号状态">
            <a-select v-decorator="['status']" v-show="visible">
              <a-select-option :value="1"> 可用 </a-select-option>
              <a-select-option :value="0" v-if="detail.role_id !== '1'">
                停用
              </a-select-option>
            </a-select>
            <span v-if="!visible">{{
              parseInt(detail.status) === 0 ? "停用" : "可用"
            }}</span>
          </a-form-item>
        </a-col>
        <a-col :key="3" :span="8" class="form-item">
          <a-form-item label="开立时间">
            {{ detail.addtime }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="10" class="form-main-content">
        <a-col :key="4" :span="8" class="form-item">
          <a-form-item label="姓名">
            <a-input
              :max-length="32"
              placeholder="姓名"
              v-show="visible"
              v-decorator="[
                'name',
                { rules: [{ required: true, message: '请输入姓名' }] },
              ]"
            />
            <span v-if="!visible">{{ detail.name }}</span>
          </a-form-item>
        </a-col>
        <a-col :key="5" :span="8" class="form-item">
          <a-form-item label="手机号">
            <a-input
              placeholder="手机号"
              v-decorator="[
                'phone',
                {
                  rules: [
                    {
                      required: true,
                      pattern: /^[1][34578][0-9]{9}$/,
                      message: '手机号码格式不对',
                    },
                  ],
                },
              ]"
              v-show="visible"
            />
            <span v-if="!visible">{{ detail.phone }}</span>
          </a-form-item>
        </a-col>
        <a-col :key="6" :span="8" class="form-item">
          <a-form-item label="所属部门">
            <a-tree-select
              v-decorator="[
                'departmentId',
                {
                  rules: [
                    {
                      required: true,
                      message: '请选择归属部门',
                    },
                  ],
                },
              ]"
              placeholder="请选择"
              treeDefaultExpandAll
              :treeData="drd.deps"
              v-show="visible"
              :replaceFields="replaceFields"
            ></a-tree-select>
            <span v-if="!visible">{{ detail.departmentName }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="10" class="form-main-content">
        <a-col :key="7" :span="8" class="form-item">
          <a-form-item label="角色">
            <a-select
              v-decorator="[
                'roleId',
                {
                  rules: [
                    {
                      required: true,
                      message: '请选择角色',
                    },
                  ],
                },
              ]"
              v-show="visible"
              placeholder="请选择角色"
            >
              <a-select-option
                v-for="item in drd.roles"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
            <span v-if="!visible">{{ detail.roleName }}</span>
          </a-form-item>
        </a-col>
        <a-col :key="8" :span="16" class="form-item">
          <a-row :gutter="10" class="form-main-content">
            <a-col :span="10" class="form-item">
              <a-form-item label="常驻区域">
                <a-select
                
                  v-decorator="[
                    'province',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请选择省份',
                        },
                      ],
                    },
                  ]"
                  v-show="visible"
                  placeholder="省"
                  @change="changeProvince"
                >
                  <a-select-option
                    v-for="item in drd.province"
                    :value="item.id"
                    :key="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
                <span v-if="!visible">{{ detail.provinceName }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="7" class="form-item">
              <a-form-item>
                <a-select
               
                
                  v-decorator="[
                    'city',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请选择市（地区）',
                        },
                      ],
                    },
                  ]"
                  v-show="visible"
                  placeholder="市（地区）"
                  @change="changeCity"
                >
                  <a-select-option
                    v-for="item in drd.city"
                    :value="item.id"
                    :key="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
                <span v-if="!visible">{{ detail.cityName }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="7" class="form-item">
              <a-form-item>
                <a-select
                
                  v-decorator="[
                    'area',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请选择区/县',
                        },
                      ],
                    },
                  ]"
                  v-show="visible"
                  placeholder="区/县"
                >
                  <a-select-option
                    v-for="item in drd.area"
                    :value="item.id"
                    :key="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
                <span v-if="!visible">{{ detail.areaName }}</span>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row :gutter="10" class="form-main-content">
        <a-col :key="9" :span="8" class="form-item">
          <a-form-item label="是否可下单">
            <a-select v-decorator="['isOrder']" v-show="visible"  @change="changestat">
              <a-select-option
                v-for="item in drd.yesOrNo"
                :value="item.id"
                :key="item.id"
               
                >{{ item.name }}</a-select-option
              >
            </a-select>
            <span v-if="!visible">{{
              detail.isOrder === 1 ? "是" : "否"
            }}</span>
          </a-form-item>
        </a-col>
        <a-col :key="10" :span="8" class="form-item">
          <a-form-item label="是否调度">
            <a-select v-decorator="['isSchedule']" v-show="visible">
              <a-select-option
                v-for="item in drd.yesOrNo"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
            <span v-if="!visible">{{
              detail.isSchedule === 1 ? "是" : "否"
            }}</span>
          </a-form-item>
        </a-col>
        
      </a-row>
      <a-row :gutter="10" class="form-main-content">
          <a-col :key="11" :span="8" class="form-item">
          <a-form-item label="对应调度">
            <a-select
                :disabled="!isorder"
              v-decorator="['scheduleId']"
              v-show="visible"
              placeholder="请选择对应调度"
            >
              <a-select-option
                v-for="item in drd.dispatch"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
            <span v-if="!visible">{{ detail.scheduleName || "暂无" }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="10" class="form-main-content">
        <a-col :key="12" :span="8" class="form-item">
          <a-form-item label="是否飞手">
            <a-select
                ref="ispilot"
              v-decorator="[
                'isPilot',
                {
                  rules: [
                    {
                      required: true,
                      message: '请选择是否飞手',
                    },
                  ],
                },
              ]"
              v-show="visible"
               @change="changePilot"
               
            >
              <a-select-option
                v-for="item in drd.yesOrNo"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
            
            <span v-if="!visible">{{
              detail.isPilot === 1 ? "是" : "否"
            }}</span>
          </a-form-item>
        </a-col>
        <a-col :key="13" :span="8" class="form-item">
          <a-form-item label="AOPA执照">
            <a-input
           
              placeholder="AOPA执照"
              v-decorator="[
                'aopa',
                {
                  rules: [
                    {
                      pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                      message: 'AOPA执照格式不对',
                    },
                  ],
                },
              ]"
              v-show="visible"
            />
           
            <span v-if="!visible">{{ detail.aopa }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="10" class="form-main-content">
        <a-col :key="14" :span="8" class="form-item">
          <a-form-item label="是否为公司">
            <a-select
              v-decorator="['isCompany']"
              v-show="visible"
              @change="changeCompany"
            >
              <a-select-option
                v-for="item in drd.yesOrNo"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
            <span v-if="!visible">{{
              detail.isCompany === 1 ? "是" : "否"
            }}</span>
          </a-form-item>
        </a-col>
        <a-col :key="15" :span="16" class="form-item">
          <a-form-item :label="isCompany ? '营业执照' : 'AOPA执照'" v-show="isPilot">
            <div class="clearfix" v-show="visible">
              <a-upload
              v-if="isPilot"
                list-type="picture-card"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange"
                :remove="handleRemove"
                :before-upload="beforeUpload"
                :loading="uploading"
                v-decorator="[
                  'uploadUrl',
                  {
                    rules: [
                      {
                        required:true,
                        message: isCompany
                          ? '请上传营业执照'
                          : '请上传AOPA执照',
                          validator:(rule,value,cbnf)=>{
                            let c = isCompany
                          ? '请上传营业执照'
                          : '请上传AOPA执照'
                            if (!value) {
                            cbnf(`${c}`)
                }
                cbnf()
                          }

                      },
                    ],
                  },
                ]"
              >
              
                <div v-if="fileList.length < 2">
                  <a-icon type="plus" />
                  <div class="ant-upload-text"></div>
                </div>
              </a-upload>
              <a-modal
                :visible="previewVisible"
                :footer="null"
                @cancel="handleCancel"
              >
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
            <!-- <a-upload
                            v-show="visible"
                            v-decorator="['uploadUrl', {
                                rules: [{
                                    required: true, message: isCompany ? '请上传营业执照' : '请上传AOPA执照'
                                }]
                            }]"
                            list-type="picture-card"
                            :showUploadList="false"
                            :multiple="false"
                            :customRequest="uploadFile"
                        >
                            <img v-if="uploadUrl" :src="uploadUrl" style="width: 80px;height:80px">
                            <div v-else>
                                <a-icon type="plus" />
                            </div>
                        </a-upload> -->
           
            <div v-if="!visible">
                     <img
               v-for="item in uploadUrl" :key="item.uploadUrl"     
              style="margin-right:20px"
              :src="item"
              width="80px"
              height="80px"
              alt=""
            />
            </div>
            <sppan v-show="control" style="color:red">请上传{{isCompany ? '营业执照' : 'AOPA执照'}}</sppan>
          </a-form-item>

          <a-form-item :label="isCompany ? '营业执照' : 'AOPA执照'" v-show="!isPilot">
            <div class="clearfix" v-show="visible">
              <a-upload
              v-if="!isPilot"
                list-type="picture-card"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange"
                :remove="handleRemove"
                :before-upload="beforeUpload"
                :loading="uploading"
              >
              
                <div v-if="fileList.length < 2">
                  <a-icon type="plus" />
                  <div class="ant-upload-text"></div>
                </div>
              </a-upload>
              <a-modal
                :visible="previewVisible"
                :footer="null"
                @cancel="handleCancel"
              >
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
            <!-- <a-upload
                            v-show="visible"
                            v-decorator="['uploadUrl', {
                                rules: [{
                                    required: true, message: isCompany ? '请上传营业执照' : '请上传AOPA执照'
                                }]
                            }]"
                            list-type="picture-card"
                            :showUploadList="false"
                            :multiple="false"
                            :customRequest="uploadFile"
                        >
                            <img v-if="uploadUrl" :src="uploadUrl" style="width: 80px;height:80px">
                            <div v-else>
                                <a-icon type="plus" />
                            </div>
                        </a-upload> -->
            <div v-if="!visible">
              <img
               v-for="item in uploadUrl" :key="item.uploadUrl"     
              style="margin-right:20px"
              :src="item"
              width="80px"
              height="80px"
              alt=""
            />
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="10" class="form-main-content">
        <a-col :key="16" :span="24" class="form-item">
          <a-form-item label="备注">
            <a-textarea
              v-show="visible"
              rows="6"
              placeholder="请输入备注"
              v-decorator="['remark']"
            />
            <span v-if="!visible">{{
              detail.remark ? detail.remark : "无"
            }}</span>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-modal
      v-model="showpwd"
      title="修改密码"
      @ok="pwdSubmit"
      :cancelButtonProps="{ props: { type: 'primary' } }"
      centered
      @cancel="cancel"
      :maskClosable="false"
      :keyboard="false"
    >
      <a-form :form="form_pwd">
        <div class="top">
          <div class="reset-content">
            <div class="description">
              当前操作账号{{ this.$store.getters.username }}， 请输入：
            </div>
            <a-form-item
              label="操作账号密码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                type="password"
                placeholder="操作账号密码"
                v-decorator="[
                  'curPassword',
                  {
                    rules: [{ required: true, message: '请输入操作账号密码' }],
                  },
                ]"
              />
            </a-form-item>
          </div>
        </div>
        <div class="bottom">
          <div class="reset-content">
            <div class="description">
              被修改账号为{{ detail.username }}， 请输入：
            </div>
            <a-form-item
              label="重置密码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                type="password"
                placeholder="重置密码"
                v-decorator="[
                  'password',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入重置密码',
                      },
                      {
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z!@#$%^&*()]{6,20}$/,
                        message:
                          '密码由6-20位数字、字母、符号 (!@#$%^&*()) 组成，最少包含一个字母、一个数字',
                      },
                    ],
                    validateTrigger: 'blur',
                  },
                ]"
              />
            </a-form-item>
          </div>
          <a-form-item
            label="重输密码"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input
              type="password"
              placeholder="重输密码"
              v-decorator="[
                'comfirmPassword',
                {
                  rules: [
                    {
                      required: true,
                      message: '请重输密码',
                    },
                    {
                      validator: compareToFirstPassword,
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
        </div>
      </a-form>
    </a-modal>
    <div class="relate-service">
      <h3>二、已下发任务</h3>
      <Task :userId="detail.id"></Task>
    </div>
    <a-modal
      v-model="servicetransfer"
      title="移交服务号"
      @ok="serviceSubmit"
      :cancelButtonProps="{ props: { type: 'primary' } }"
      centered
      :maskClosable="false"
      :keyboard="false"
    >
      <a-select v-model="serviceForm" style="width: 100%">
        <a-select-option :value="v.id" :key="v.id" v-for="v in detail.users">
          {{ v.realname }}({{ v.username }})
        </a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>

<script>
import config from "@/api/config";
import Task from "./task";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

export default {
  components: {
    Task,
  },
  data() {
    return {
      id: 0,
      status: 1,
      roles: [],
      deps: [],
      detail: {},
      visible: false,
      form: this.$form.createForm(this),
      form_pwd: this.$form.createForm(this),
      labelCol: { lg: { span: 6 }, sm: { span: 6 } },
      wrapperCol: { lg: { span: 18 }, sm: { span: 18 } },
      showpwd: false,
      tree: [],
      serviceColumns: [
        { title: "服务号编号", dataIndex: "id", align: "center" },
        { title: "服务号名称", dataIndex: "name", align: "center" },
        { title: "绑定时间", dataIndex: "created_at", align: "center" },
        {
          title: "本账号角色类型",
          scopedSlots: { customRender: "role" },
          align: "center",
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ],
      deviceColumns: [
        { title: "设备编号", dataIndex: "id", align: "center" },
        { title: "类型", dataIndex: "name", align: "center" },
        { title: "型号", dataIndex: "model", align: "center" },
        { title: "绑定时间", dataIndex: "created_at", align: "center" },
        { title: "设备状态", dataIndex: "status", align: "center" },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ],
      servicetransfer: false,
      devicetransfer: false,
      service_id: 0,
      device_id: 0,
      serviceForm: "",
      deviceForm: "",
      drd: {
        yesOrNo: [
          { id: 1, name: "是" },
          { id: 0, name: "否" },
        ],
        dispatch: [],
        province: [],
        city: [],
        area: [],
        deps: [],
        roles: [],
      },
      isCompany: true,
      uploadUrl: [],
      control:[],
      fileList: [],
      previewVisible: false,
      previewImage: "",
      uploading: false,
      replaceFields: {
        title: "name",
        key: "id",
        value: "id",
      },
      //是否为飞手
      isPilot:'',
      //是否可下单
      isorder:''
     
    };
  },
  computed: {

    getCurrDepartment: function () {
      let department = {};
      function flatten(data) {
        return data.reduce(
          (arr, { id, name, children = [] }) =>
            arr.concat([{ id, name }], flatten(children)),
          []
        );
      }
      let depsObj = flatten(this.deps);
      depsObj.map((item) => {
        department[item.id] = item.name;
      });
      return department[this.detail.department_id];
    },
    getCurrRole: function () {
      let role = {};
      this.roles.map((item) => {
        role[item.id] = item.name;
      });
      return role[this.detail.role_id];
    },
  },
  methods: {
        //  监听是否可下单
        changestat(val){
                this.isorder = Number(val)
        },

    onSubmit(form) {
        
      if(this.isPilot){
console.log(12)
          if(this.fileList.length == 0){
              this.control = true
              return;
          }
      }
    
      this.control = false
      this.form.validateFields(async (err, values) => {
        if (!err) {
          const { fileList } = this;
          let fileUrl = [],
            flag = false;
          const formData = new FormData();
          fileList.forEach((file) => {
            if (file.url) {
              fileUrl.push(file.url);
            } else {
              flag = true;
              formData.append("uploadFile", file.originFileObj);
            }
          });
          if (flag) {
            this.uploading = true;
            let uploadRes = await this.http("post", config.uploadURL, formData);
            this.uploading = false;
            fileUrl.push(uploadRes.data.filePath);
          }
          values.file = JSON.stringify(fileUrl);

          let { status } = await this.postData(values);
          if (status === 1) {
            this.$message.success("修改成功", 1);
            this.detail = { ...this.detail, ...values };
            this.visible = false;
            this.getDetail(this.id);
          } else {
            this.$message.warning("修改失败", 1);
          }
        }
      });
    },
    reset() {
      this.setForm();
      this.visible = false;
      // let setData = {
      //     'status': this.detail.status,
      //     'department_id': this.detail.department_id,
      //     'mobile': this.detail.mobile,
      //     'licence': this.detail.licence,
      //     'descs': this.detail.descs,
      // };
      // this.form.setFieldsValue(setData);
    },
    updateForm() {
      this.visible = !this.visible;
    },
    async postData(param) {
      param.id = this.detail.id;
      // param.file = JSON.stringify([this.uploadUrl])
      return await this.http("put", "/user/update", param);
    },
    async getDetail(id) {
      let { data } = await this.http("get", `/user/view/${id}`);
      // data.role_id = String(data.role_id)
      // data.department_id = String(data.department_id)
      this.detail = data;

        this.isPilot = this.detail.isPilot == 1 ?true:false
        this.isorder = this.detail.isOrder
        this.fileList =  JSON.parse(data.file).map((item, index) => {
           return {
          uid: index,
           url: item,
         };
         }) || [];
     
      
       
      this.setForm();
    },
    setForm() {
      let { detail } = this,
        formdata = this.form.getFieldsValue();
      Object.keys(formdata).forEach((key) => {
        if (key == "departmentId" || key == "roleId" || key == "scheduleId") {
          if (detail[key] === 0) {
            formdata[key] = undefined;
          } else {
            formdata[key] = detail[key];
          }
        } else {
          formdata[key] = detail[key];
        }
      });
      this.uploadUrl = detail.file ? JSON.parse(detail.file) : [];
      formdata.uploadUrl = this.uploadUrl;
      this.form.setFieldsValue(formdata);
      this.isCompany = detail.isCompany === 1 ? true : false;
      this.getDstrict("city", detail.province);
      this.getDstrict("area", detail.city);
    },
    async getDstrict(type, pid) {
      let { data } = await this.http("get", "/dstrict/list", { pid });
      this.drd[type] = data || [];
    },
    changeProvince(val) {
      this.drd.area = [];
      this.form.resetFields(["city", "area"]);
      this.getDstrict("city", val);
    },
    changeCity(val) {
      this.form.resetFields(["area"]);
      this.getDstrict("area", val);
    },
    async getDispatch() {
      let { data } = await this.http("get", "/user/schedule");
      this.drd.dispatch = data || [];
    },
    async getDep() {
      let { data } = await this.http("get", "/department/tree");
     this.drd.deps =  data
    //   this.drd.deps = this.createTree(data || []);
    },
    createTree(data) {
      let tree = [];
      data.map((item) => {
        let { name, id } = item;
        item.label = name;
        item.value = id;
        item.children = data.filter((f) => f.pid == item.id);
        if (item.pid === 0 && item.children.length) {
          tree.push(item);
        }
      });
      return tree;
    },
    async getRole() {
      let { data } = await this.http("get", "/role/all");
      this.drd.roles = data || [];
    },
    changeCompany(val) {
      this.isCompany = val === 1 ? true : false;
      
    },
    //判断是否为飞手
    changePilot(val){
       this.isPilot = val === 1 ? true : false;
    },

    async uploadFile(data) {
      let { file } = data;
      let formData = new FormData();
      formData.append("uploadFile", file);
      let {
        data: { filePath },
      } = await this.http("post", config.uploadURL, formData);
      this.uploadUrl = filePath;
      this.form.setFieldsValue({
        uploadUrl: this.uploadUrl,
      });
      return data.onSuccess({ code: 200 }, data.file);
    },
    showPwd() {
      this.showpwd = true;
    },
    pwdSubmit() {
      //修改密码提交
      this.form_pwd.validateFields(async (err, values) => {
        if (!err) {
          let { status, message } = await this.http(
            "put",
            "/user/editPassword",
            { id: this.id, ...values }
          );
          if (status === 1) {
            this.showpwd = false;
            this.$message.success("密码重置成功", 1);
            this.form_pwd.resetFields();
          } else {
            this.$message.error(message, 1);
          }
        }
      });
    },
    cancel() {
      this.form_pwd.resetFields();
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form_pwd;
      if (value && value !== form.getFieldValue("password")) {
        callback("两次输入密码不一致！");
      } else {
        callback();
      }
    },
    serviceTransfer(data) {
      this.service_id = data.id;
      this.servicetransfer = true;
    },
    deviceTransfer(data) {
      this.device_id = data.id;
      this.devicetransfer = true;
    },
    serviceSubmit() {

      if (!this.serviceForm) {
        this.$message.warning("请选择移交人", 1);
        return false;
      }
      var form = {};
      if (this.detail.type == 0) {
        form.dispatch_id = this.serviceForm;
      } else if (this.detail.type == 1) {
        form.sale_id = this.serviceForm;
      } else {
        form.finance_id = this.serviceForm;
      }
      this.http("put", "service/update?id=" + this.service_id, form).then(
        (res) => {
          if (res.id) {
            this.$message.success(res.msg, 1);
            this.servicetransfer = false;
            this.getDetail(this.id);
          } else {
            this.$message.error(res.msg, 1);
          }
        }
      );
    },

    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
        this.fileList = fileList;
  if(this.fileList.length >=0){
         this.control =false
        

    }
      
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
      
    },
    beforeUpload(file) {
        
      console.log(file);
      this.fileList = [...this.fileList, file];
      return false;
    },
  },

  async mounted() {

    this.id = this.$route.params.id;
    
    // Promise.all([
    await this.getDetail(this.id);
  
    await Promise.all([
      this.getDstrict("province"),
      // this.getDstrict('city', this.detail.province),
      // this.getDstrict('area', this.detail.city),
      this.getDispatch(),
      this.getDep(),
      this.getRole(),
    ]);
   

    // ])
  },
  created(){
      this.control = false
  }
  
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "./../../assets/scss/mixin";

.header {
  @include fj();
  margin-bottom: 30px;
  .operate {
    .ant-btn + .ant-btn {
      margin-left: 40px;
    }
  }
}

.relate-service {
  #update-table-1 {
    padding-left: 30px;
    padding-right: 30px;
  }
  margin-bottom: 20px;
  & > h3 {
    margin-bottom: 20px;
  }
}

.relate-device {
  #update-table-2 {
    padding-left: 30px;
    padding-right: 30px;
  }
  & > h3 {
    margin-bottom: 20px;
  }
}

.top {
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: 20px;
  border-bottom: 1px dashed $input_color;
  .reset-content {
    margin-left: 24px;
    margin-right: 24px;
    .description {
      margin-left: 10px;
      margin-bottom: 20px;
    }
  }
}

.bottom {
  margin-bottom: 20px;
  .reset-content {
    .description {
      margin-left: 10px;
      margin-bottom: 20px;
    }
  }
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
::v-deep {
  .ant-col-16 {
    .ant-form-item-control-wrapper {
      width: 100%;
    }
  }
}
</style>
